import { useEffect, useState } from "react";
import { GetOrderDetails } from "../../api/index";
import { Table, Image, Tag,Spin } from "antd";
import { useLocation } from "react-router-dom";
import "../../css/IndexDetail.css";
import React from "react";

const OrderDetail = () => {

    // 供应商订单详情
    const [SupplierOrders, setSupplierOrders] = useState([]);
    const location = useLocation();
    const [spinning, setSpinning] = React.useState(false);//加载中
    const bindSupplierOrders = async () => {
        setSpinning(true);
        const res = await GetOrderDetails(

            {
                id: location.pathname.slice(19),
                page: 1,
                limit: 10,
                begin: "1750-05-22",
                end: "2024-03-05"
            }
        );
        if (res.result === 0) {
            setSpinning(false);
            setSupplierOrders(res.data)
        }
    };
    useEffect(() => {
        bindSupplierOrders();
    }, [])

    const SupplierOrder = [
        {
            title: "序号",
            render: (text, record, index) => `${index + 1}`,
            width:65
        },

        {
            title: '详情号',
            dataIndex: 'id',
            ellipsis: true,
        },
        {
            title: '图片',
            dataIndex: 'photo',
            render: (text) => (
                <Image
                    width={50}
                    src={text}
                />
            ),
            width:90
        },
        {
            title: '商品名称',
            dataIndex: 'goodsName',
            ellipsis: true,
            width:90
            
        },
        {
            title: '供应商',
            dataIndex: 'supplier',
            ellipsis: true,
            
            render: (_, record) => (
                <>
                    <Tag color={record.supplier == null ? "error" : "blue"} > {record.supplier === null ? '自营' : record.supplier}</Tag>
                </>
            ),
            width:90
        },
        {
            title: '单价',
            dataIndex: 'price',
            render: (val,) => (
                <>
                    <Tag color="error">￥{val}</Tag>
                </>
            ),
            width:90
        },
        {
            title: '数量',
            dataIndex: 'number',
            // width: '200px'
            width:90
        },
        {
            title: '小计',
            dataIndex: 'money',
            render: (val,) => (
                <>
                    <Tag color="error">￥{val}</Tag>
                </>
            ),
            width:90
        },
        {
            title: '发货',
            dataIndex: 'isSend',
            ellipsis: true,
            width:90,
           
            render: (_, record) => (
                <>
                    <Tag color={record.isSend === 0 ? "warning" : "success"} > {record.isSend === 0 ? '否' : '是'}</Tag>
                </>
            ),
        },
        {
            title: '收货',
            dataIndex: 'isReceive',
            render: (_, record) => (
                <>
                    <Tag color={record.isReceive === 0 ? "warning" : "success"} > {record.isReceive === 0 ? '否' : '是'}</Tag>
                </>
            ),
            width:90
        },
        {
            title: '发货时间',
            dataIndex: 'sendTime',
            ellipsis: true,
            render: (_, record) => (
                <>
                    <span>{record.sendTime === "" ? '-' : record.sendTime}</span>
                </>
            ),
        },
        {
            title: '收货时间',
            dataIndex: 'receiveTime',
            ellipsis: true,
            render: (_, record) => (
                <>
                    <sapn>{record.receiveTime === "" ? '-' : record.receiveTime}</sapn>
                </>
            ),
        },
    ];
    return (
        <div className="default-exam-container">
            <div className="default-container">
                <div className="default-content">
                    <div className="default-table">
                        <Table
                            columns={SupplierOrder}
                            dataSource={SupplierOrders}
                            bordered
                            pagination={false}
                        />
                    </div>
                </div>
            </div>
            <Spin spinning={spinning} tip="Loading" fullscreen />
        </div>
    )
}

export default OrderDetail